<template>
  <div class="page-edit">
    <header>
      <i style="font-size: 18px; cursor: pointer; margin-right: 8px" class="el-icon-arrow-left" @click="back"></i>
      <span>添加考核项</span>
    </header>
    <section class="edit-body">
      <div class="form-page">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-col :span="12">
            <el-form-item label="检查表名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入检查表名称" :readonly="!isEdit" :disabled="!isEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择检查类型" :readonly="!isEdit" :disabled="!isEdit">
                <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div class="form-page">
        <p class="title-level2">检查项</p>
        <div style="margin-left:60px">
          <el-button @click="addItems" style="margin-bottom:10px">添加检查项</el-button>
          <el-table
            :data="savedTableData"
            tooltip-effect="dark"
            style="width: 60%"
            :max-height="400"
            border
            :cell-style="columnStyle"
            :header-cell-style="{
              'text-align': 'left',
              color: '#333',
              'border-color': '#F2F2F2!important',
            }"
            >
            <el-table-column
              prop="index"
              label="编号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="item"
              label="检查项目"
            >
            </el-table-column>
            <el-table-column
              prop="standard"
              label="检查标准"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>
    <footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </footer>
    <el-dialog title="添加巡检项" :visible.sync="dialogFormVisible" @close="cancelAdd">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-key="getRowKeys"
        :max-height="400"
        border
        :cell-style="columnStyle"
        :header-cell-style="{
          'text-align': 'left',
          color: '#333',
          'border-color': '#F2F2F2!important',
        }"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column
          prop="index"
          label="编号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="检查项目"
        >
        </el-table-column>
        <el-table-column
          prop="standard"
          label="检查标准"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px">
        <p class="title-level2">已选检查项</p>
        <el-table
          :data="selTableData"
          tooltip-effect="dark"
          style="width: 100%"
          :max-height="400"
          :row-key="getRowKeys"
          border
          :header-cell-style="{
            'text-align': 'left',
            color: '#333',
            'border-color': '#F2F2F2!important',
          }"
          :cell-style="columnStyle"
          >
          <el-table-column
            prop="index"
            label="编号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="检查项目"
          >
          </el-table-column>
          <el-table-column
            prop="standard"
            label="检查标准"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { pagePoints,listPoints } from "@/api/risk/points";
import { addBatchCheckItem } from "@/api/risk/check";
export default {
    props:['info'],
    data(){
      return {
        isEdit:false,
        form:{},
        typeOptions:[],
        rules: {
          name: [
            { required: true, message: "检查表名称不能为空", trigger: "blur" }
          ],
          type: [
            { required: true, message: "检查类型不能为空", trigger: "change" }
          ],
        },
        dialogFormVisible:false,
        multipleSelection:[],
        tableData:[],
        selTableData:[],
        savedTableData:[],
      }
    },
    watch:{
      info:{
        handler(newVal,oldVal){
          console.log('newVal-----------',newVal);
          if(newVal!=oldVal){
            this.form=newVal;
            this.savedTableData=(newVal.itemList ?? []).map((_,index) => {
              return {
                ..._,
                index:index+1,
              }
            });
          }
        },
        immediate:true,
        deep:true,
      },
    },
    mounted(){
      console.log('info',this.info);
    },
    created() {
      this.getDicts("check_type").then(response => {
        this.typeOptions = response.data;
      });
    },
    methods:{
      getRowKeys(row){
        return row.riskPointsId || row.id;
      },
      cancelAdd(){
        this.dialogFormVisible=false;
        this.tableData=[];
        this.selTableData=[];
        this.multipleSelection=[];
      },
      back(){
        this.$emit('closeAddItems')
      },
      handleSave(){
        this.dialogFormVisible=false;
        this.savedTableData=this.selTableData;
      },
      submitForm(){
        console.log('this.info',this.info);
        if(this.savedTableData&&this.savedTableData.length==0){
          return this.$message.error('请添加检查项！')
        }else{
          let params=this.savedTableData.map(_ => {
            return {
              item: _.name || _.item,
              riskPointsId: _.id,
              standard: _.standard,
              checkId:this.info.id,
            }
          });
          addBatchCheckItem(params).then(res => {
            console.log('res',res);
            if(res.code==200){
              this.$emit('closeAddItems')
            }
          })
        }
      },
      cancel(){
        this.$emit('closeAddItems')
      },
      addItems(){
        this.dialogFormVisible=true;
        this.selTableData=this.savedTableData;
        console.log('this.selTableData',this.selTableData);
        this.getPage();
      },
      toggleSelection(rows) {
        this.$refs.multipleTable.clearSelection();
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row,true);
          });
        }
      },
      handleSelectionChange(val) {
        console.log('val',val);
        this.multipleSelection=val;
        console.log('this.multipleSelection',this.multipleSelection);
        this.selTableData=this.multipleSelection.map((_,index) => {
          return {
            ..._,
            index:index+1,
            name:_.item || _.name,
            item:_.item || _.name,
          }
        });
      },
      /** 查询危险点列表 */
      getPage() {
        listPoints().then(response => {
          if(response.code == 200){
              this.tableData = response.data.map((_,index) => {
                return {
                  ..._,
                  index:index+1,
                }
              });
              console.log('getPage this.tableData',this.tableData);
              this.toggleSelection(this.selTableData);
            }
          });
        },
        columnStyle({ row, column, rowIndex, columnIndex }) {
          // eslint-disable-next-line eqeqeq
          if (rowIndex == 0 || rowIndex % 2 == 0) {
            return "text-align:center;color:#333;padding: 12px 0;border-color: #F2F2F2!important;";
          } else {
            return "text-align:center;background:rgba(36, 116, 251,.03);color:#333;padding: 12px 0;border-color: #F2F2F2!important;";
          }
        },
      }
  }
</script>
  
<style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__body{
  padding:0 60px !important;
}
</style>